<template>
  <view class="phone-login-container">
    <!-- 顶部logo -->
    <view class="logo-container">
      <image class="logo" src="/static/image/logo.png" mode="aspectFit"></image>
    </view>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <view class="title">一键手机号登录</view>
      <view class="desc">安全便捷，无需输入密码</view>
      
      <!-- 微信获取手机号按钮 -->
      <button class="login-btn" 
              v-if="canGetPhoneNumber"
              open-type="getPhoneNumber" 
              @getphonenumber="handleGetPhoneNumber"
              :loading="loading">
        <image class="wx-icon" src="/static/wechat-icon.png"></image>
        <text>微信用户一键登录</text>
      </button>
      
      <!-- 其他登录方式 -->
      <view class="other-login" v-if="!canGetPhoneNumber">
        <view class="tip">请先在微信中授权登录</view>
        <button class="auth-btn" @click="handleWxLogin">微信授权登录</button>
      </view>
      
      <!-- 用户协议 -->
      <view class="agreement">
        <checkbox-group @change="handleAgreementChange">
          <label>
            <checkbox :checked="agreed" color="#faba4f" style="transform:scale(0.7)"/>
            我已阅读并同意<text class="link" @click="navigateToAgreement">《用户协议》</text>和<text class="link" @click="navigateToPrivacy">《隐私政策》</text>
          </label>
        </checkbox-group>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      canGetPhoneNumber: false,
      loading: false,
      agreed: false,
      loginCode: '' // 微信登录code
    }
  },
  onLoad() {
    this.checkLoginStatus()
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      uni.checkSession({
        success: () => {
          this.canGetPhoneNumber = true
        },
        fail: () => {
          this.canGetPhoneNumber = false
        }
      })
    },
    
    // 微信授权登录
    handleWxLogin() {
      uni.login({
        provider: 'weixin',
        success: (res) => {
          this.loginCode = res.code
          this.canGetPhoneNumber = true
          
          
        },
        fail: (err) => {
          uni.showToast({
            title: '微信登录失败',
            icon: 'none'
          })
          console.error('微信登录失败:', err)
        }
      })
    },
    
    // 获取手机号回调
    async handleGetPhoneNumber(e) {
      if (!this.agreed) {
        uni.showToast({
          title: '请先同意用户协议和隐私政策',
          icon: 'none'
        })
        return
      }
      
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        this.loading = true
        const { encryptedData, iv } = e.detail
        
        // 获取之前存储的微信授权信息
        const wxAuthInfo = uni.getStorageSync('wxAuthInfo') || {}
        const res = await this.$api.post('/userinfo/ma/phone/login',{
			code: this.loginCode,
			encryptedData,
			iv,
		},false)
		if(res.data.code == 0) {
			this.handleLoginSuccess(res.data.data)
		}
       }
    },
    
    // 登录成功处理
    handleLoginSuccess(userData) {
      // 保存用户信息和token
      uni.setStorageSync('token', userData.thirdSession)
      uni.setStorageSync('userInfo', userData)
      
      // 跳转到首页或来源页
      const pages = getCurrentPages()
      if (pages.length >= 2) {
        uni.navigateBack()
      } else {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    },
    
    // 协议勾选
    handleAgreementChange(e) {
      this.agreed = e.detail.value.length > 0
    },
    
    // 跳转到协议页面
    navigateToAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user-agreement'
      })
    },
    
    // 跳转到隐私政策
    navigateToPrivacy() {
      uni.navigateTo({
        url: '/pages/agreement/privacy-policy'
      })
    },
    
    // 跳转到短信验证码登录
    navigateToSmsLogin() {
      uni.navigateTo({
        url: '/pages/login/sms-login'
      })
    }
  }
}
</script>

<style scoped>
.phone-login-container {
  padding: 40rpx;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.logo-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 20rpx;
}

.login-form {
  flex: 1;
  /* background-color: #fff; */
  border-radius: 20rpx;
  padding: 40rpx;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 16rpx;
}

.desc {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  margin-bottom: 60rpx;
}

.login-btn {
  background-color: #faba4f;
  color: #fff;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.wx-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
  
}

.other-login {
  margin-bottom: 40rpx;
}

.tip {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  margin-bottom: 20rpx;
}

.auth-btn {
  background-color: #faba4f;
  color: #fff;
  border-radius: 50rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
}

.agreement {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.link {
  color: #576B95;
}

.footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 40rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}

.text {
  padding: 0 20rpx;
  font-size: 26rpx;
  color: #999;
}

.other-methods {
  display: flex;
  justify-content: center;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40rpx;
}

.method-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
}

.method-name {
  font-size: 24rpx;
  color: #666;
}
</style>